import { getSyncRecords } from "@/services/user";
import { Modal, Table } from "antd";
import moment from "moment";
import React from "react";

class RecordsModal extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      list:[],
      current:1,
      size:10,
      total:0,
      loading:false
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  openModal = () => {
    this.setState({
      visible:true
    },() => {
      this.getList()
    })
  }

  closeModal = () => {
    this.setState({
      visible:false
    })
  }

  getList = () => {
    this.setState({
      loading:true
    },async () => {
      const { current,size } = this.state;
      const res = await getSyncRecords({current,size})
      this.setState({
        list:res.records,
        total:res.total,
        loading:false
      })
    })
  }

  queryByCondition = (current,size) => {
    this.setState({
      current,
      size
    },() => {
      this.getList()
    })
  }

  render(){
    const { visible,current,size,total,list,loading } = this.state;
    const circleStyle = {
      display:'inline-block',
      width:10,
      height:10,
      borderRadius:"50%",
      marginRight:10
    }
    const columns = [
      {
        title:"操作人",
        dataIndex:"userName",
        width:100
      },
      {
        title:"同步时间",
        dataIndex:"contactSyncLastTime",
        width:100,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title:"同步结果",
        dataIndex:"contactSyncStatus",
        width:100,
        render:(status) => {
          switch(status){
            case '0':
              return <span><span style={{...circleStyle,background:"#C1C1C1"}}></span><span>未同步</span></span>;
            case '1':
              return <span><span style={{...circleStyle,background:"#3E5BFF"}}></span><span>同步中</span></span>;
            case '2':
              return <span><span style={{...circleStyle,background:"#318C85"}}></span><span>同步完成</span></span>;
            case '3':
              return <span><span style={{...circleStyle,background:"#FF5C5D"}}></span><span>同步失败</span></span>;
            case '4':
              return <span><span style={{...circleStyle,background:"#FF9640"}}></span><span>取消同步</span></span>;
          }
        }
      }
    ]
    return(
      <Modal
        visible={visible}
        title="同步通讯录记录"
        onCancel={this.closeModal}
        destroyOnClose
        footer={null}
        width={600}
      >
        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          pagination={{
            total,
            current,
            pageSize:size,
            showQuickJumper:true,
            showSizeChanger:true,
            onChange:this.queryByCondition,
            onShowSizeChange:this.queryByCondition,
            showTotal:() => { return `共${Math.ceil(total / size)}页/${total}条数据`}
          }}
          scroll={{y:'50vh'}}
        />
      </Modal>
    )
  }
}

export default RecordsModal;